<template>
    <div class="container-wrap">
        <img :src="myBackgroundImg" />
        <div class="background">
            <img v-if="showAwater" :src="PicUrl" class="avatar" @click="previewImg"/>
            <img v-else :src="oldAwaterImg" class="avatar" @click="previewImg"/>
            <span class="name">{{UserName}}</span>
        </div>
        <div class="my-list">
            <div class="line" @click="$router.push('/pages/my/personData')">
                <span class="text">个人资料</span>
                <span class="right">
                    <img :src="moreImg" />
                </span>
            </div>
            <div class="line" @click="$router.push('/pages/my/changePassword')">
                <span class="text">修改密码</span>
                <span class="right">
                    <img :src="moreImg" />
                </span>
            </div>
            <div class="line" @click="$router.push('/pages/my/changePhone2')">
                <span class="text">修改手机号</span>
                <span class="right">
                    <img :src="moreImg" />
                </span>
            </div>
            <div class="line" @click="$router.push('/pages/my/aboutUs')">
                <span class="text">关于我们</span>
                <span class="right">
                    <img :src="moreImg" />
                </span>
            </div>
            <hr>
            <div class="line" @click="redirectToLogin">
                <span class="text">退出登录</span>
                <span class="right">
                    <img :src="moreImg" />
                </span>
            </div>
        </div>
        <van-dialog id="van-dialog" />
        <van-toast id="van-toast" />
    </div>
</template>

<script>
    import { AppUserInfo } from '@/providers/service'
    export default {
        name: 'my',
        data() {
            return {
                UserName: '',
                PicUrl: '',
                showAwater: false,
                myBackgroundImg: `${process.env.PUBLICIIMGURL}base/myBackground.png`,
                oldAwaterImg: `${process.env.PUBLICIIMGURL}base/oldAwater.png`,
                moreImg: `${process.env.PUBLICIIMGURL}base/more.png`,
            }
        },
        methods: {
            judgeString(type) {
                return Object.prototype.toString.call(type) === '[object String]'
            },
            previewImg(){
                if(this.showAwater){
                    let picUrl = wx.getStorageSync('userInfo').PicUrl
                    wx.previewImage({
                        current:picUrl,
                        urls:[picUrl],
                        success(){},
                        fail(){
                            this.$toast('加载图片失败')
                        }
                    })
                }
            },
            redirectToLogin(){
                this.$dialog.confirm({
                    title:'温馨提示',
                    message:'退出登录会返回登录页面'
                }).then(() =>{
                    // 退出登录的时候保存密码，清空userINfo
                    wx.setStorageSync('userInfo','')
                    this.$router.replace('/pages/login/index')
                }).catch((err)=>{
                    console.log(err)
                })
            },
        },
        onShow() {
            let res = wx.getStorageSync('userInfo')
            this.UserName = res.UserName
            if (this.judgeString(res.PicUrl)) {
                this.PicUrl = res.PicUrl
                this.showAwater = true
            } else {
                this.showAwater = false
            }
        }
    }
</script>

<style lang="less" scoped>
    page {
        height: 100%;
        width: 100%;
        background: #f1f1f1;
    }

    .container-wrap {
        width: 100%;
        background: #FFF;

        img {
            width: 100%;
            height: 400rpx;
        }

        .background {
            position: absolute;
            top: 0rpx;
            left: 0rpx;
            width: 100%;
            height: 400rpx;
            display: flex;
            flex-direction: column;
            align-items: center;

            .avatar {
                width: 164rpx;
                height: 164rpx;
                margin-top: 130rpx;
                background: transparent;
                border-radius: 50px;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .name {
                margin-top: 12rpx;
                font-size: 32rpx;
                color: #FFF;
            }
        }

        .my-list {
            margin: 45rpx 20rpx 0rpx 40rpx;

            .line {
                height: 60rpx;
                display: flex;
                margin: 24rpx 0rpx;
                justify-content: space-between;
                border-bottom: 3rpx solid #e9e9e9;
                font-size: 26rpx;
                font-family: Microsoft YaHei;
                color: #666666;

                .right img {
                    width: 30rpx;
                    height: 30rpx;
                    position: relative;
                    right: 6rpx;
                    top: 3rpx;
                }
            }
        }
    }
</style>
